<template>
  <div class="header">
    <!-- <div class="logo" /> -->
    <Row>
      <Col :span="12">
        <Menu
          v-model:selectedKeys="selectedKeys"
          theme="dark"
          mode="horizontal"
          :style="{ lineHeight: '64px' }"
          @select="SelectNavKey"
        >
          <MenuItem v-for="(item, index) in menuList" :key="item.key"
            >{{ item.title }}
            <template #icon>
              <Icon :icon="item.icon" />
            </template>
          </MenuItem>
        </Menu>
      </Col>
      <Col :span="6" />
      <Col :span="6">
        <a-input
          v-model:value="keyword"
          allowClear
          :bordered="false"
          placeholder="搜索商品"
          class="search_input"
          @blur="SelectNavKey1"
        >
          <template #prefix>
            <Icon icon="ant-design:search-outlined" color="#999" />
          </template>
        </a-input>
      </Col>
    </Row>
  </div>
</template>
<script lang="ts" setup name="ViewsClientHeader">
  import { ref, onMounted, watch } from 'vue';
  import { Menu, MenuItem, Row, Col } from 'ant-design-vue';
  import Icon from '/@/components/Icon/index';
  import { router } from '/@/router/index';
  const emit = defineEmits(['selectKey']);

  const selectedKeys = ref<string[]>(['1']);
  const menuList = ref([
    {
      key: '1',
      title: '首页',
      icon: 'ant-design:home-filled',
      path: '/home',
    },
    {
      key: '2',
      title: '商品',
      icon: 'ant-design:shop-filled',
      path: '/shop',
    },
    {
      key: '3',
      title: '收藏',
      icon: 'ant-design:heart-twotone',
      path: '/favorite',
    },
    {
      key: '4',
      title: '用户信息',
      icon: 'ant-design:user-outlined',
      path: '/center',
    },
  ]);
  let keyword = ref('');
  watch(
    () => router.currentRoute.value.query,
    () => {
      if (router.currentRoute.value.query.key === '1') {
        selectedKeys.value = ['1'];
      } else if (router.currentRoute.value.query.key === '2') {
        selectedKeys.value = ['2'];
      } else if (router.currentRoute.value.query.key === '3') {
        selectedKeys.value = ['3'];
      } else if (router.currentRoute.value.query.key === '4') {
        selectedKeys.value = ['4'];
      } else {
        selectedKeys.value = [''];
      }
    },
    { immediate: true },
  );
  const SelectNavKey = (e: any) => {
    selectedKeys.value = e.selectedKeys;
    if (e.key === '1') {
      router.push({ path: '/client/index', query: { key: e.key } });
    } else if (e.key === '2') {
      router.push({ path: '/client/productDetail', query: { key: e.key } });
    } else if (e.key === '3') {
      router.push({ path: '/client/Favorite', query: { key: e.key } });
    } else if (e.key === '4') {
      router.push({ path: '/client/center', query: { key: e.key } });
    }
  };
  const SelectNavKey1 = () => {
    router.push({ path: '/client/productDetail', query: { key: '2', keyword: keyword.value } });
  };
</script>
<style scoped lang="less">
  .header {
    padding: 0 16vw;

    .search_input {
      background: #f1f1f1;
      border-radius: 20px;
      ::v-deep .ant-input {
        color: #333;
      }
    }
  }
</style>
